/**
 * 
 * 
 * 
 * 
 * 备忘录列表详情
*/

import React, { useState, useCallback, useEffect, useMemo } from 'react';
import Header from '@/component/layout/Header/Header';
import { TextareaItem, Button, InputItem, Toast, PickerView, DatePicker, List } from 'antd-mobile';
import { postAddMemo, getMemoDetail, updateMemoDetail } from '@/network/protocol';
import qs from "querystring";
import './style.less';
import moment from 'moment';
import classname from 'classnames';

let time = new Date();

const MemoDetail = (props) => {
  const { location } = props;
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [show, setShow] = useState(false);
  const [value, setValue] = useState('0');
  const [date1, setDate1] = useState(time)
  const ValueList = useMemo(() => {
    // '重要紧急0、重要不紧急1、不重要紧急2、不重要不紧急3'
    return [
      { label: '重要紧急', value: '0', },
      { label: '重要不紧急', value: '1', },
      { label: '不重要紧急', value: '2', },
      { label: '不重要不紧急', value: '3', },
    ];
  }, [])


  const memorandumId = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.id
  }, [location.search])

  const child = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.child
  }, [location.search])

  const getData = useCallback(async () => {
    let response = await getMemoDetail({ memorandumId })
    if (response.errorCode === 0) {
      let data = response.source;
      setDate1(new Date(data.createTime))
      setTitle(data.title)
      setContent(data.content)
      setValue(String(data.memType))
    }
  }, [memorandumId])
  const addMemo = useCallback(async () => {
    let param = { title, content, memType: value, createTime: moment(+date1).startOf('day').valueOf()};
    if (!param.title) {
      Toast.success('请输入标题')
      return
    }
    if (!param.content) {
      Toast.success('请输入内容')
      return
    }
    let response = await postAddMemo(param)
    if (response.errorCode === 0) {
      Toast.success('创建成功', 1, () => {
        props.history.push('/memo');
      })
    } else {
      Toast.success(response.message || '创建失败', 1,)
    }
  }, [title, content, value, date1, props.history])
  const updataMemo = useCallback(async () => {
    let param = { title, content, memType: value,createTime: moment(+date1).startOf('day').valueOf() };
    if (!param.title) {
      Toast.success('请输入标题')
      return
    }
    if (!param.content) {
      Toast.success('请输入内容')
      return
    }
    param.id = memorandumId;
    let response = await updateMemoDetail(param)
    if (response.errorCode === 0) {
      Toast.success('更新成功', 1, () => {
        props.history.push('/memo');
      })
    } else {
      Toast.fail(response.message)
    }
  }, [content, date1, memorandumId, props.history, title, value])

  const onChange = useCallback((e) => {
    setValue(e[0]);
    setShow(false);

  }, [])
  const getValue = useCallback(() => {
    let item = ValueList.find(item => item.value === value)
    return item.label
  }, [ValueList, value])
  const changeTime = useCallback((e) => {
    setDate1(e);
  }, [])

  useEffect(() => {
    if (memorandumId) getData();
  }, [getData, memorandumId])
  return (
    <>
      <Header center={<span>个人中心</span>} />
      <div className="global-content MemoDetail-box">
        {!child &&
          <div className="meetting-box">
            <span className="meeting-type">级别：</span>
            <div className="select-meeting" onClick={() => { setShow(true) }}>
              <span >{getValue()}</span>
              <img src={require('../../assests/img/down.png')} alt="" />
            </div>
          </div>
        }
        <div className="meetting-box">
          <span className="meeting-type">时间：</span>
          <div className={classname('meetingbox-aa',{'disabled-a':memorandumId?true:false})}>
            <DatePicker
              mode="date"
              title="选择时间"
              extra="Optional"
              value={date1}
              onChange={changeTime}
              disabled={memorandumId?true:false}
            >
              <List.Item className="date-a " arrow="horizontal"></List.Item>
            </DatePicker>
          </div>


        </div>



        <InputItem
          className="input-title"
          placeholder="标题"
          onChange={e => setTitle(e)}
          value={title}
        />

        <TextareaItem
          className="text-content"
          placeholder="内容"
          onChange={e => setContent(e)}
          value={content}
          editable={!child}
        />

        {
          show && <PickerView
            onChange={onChange}
            value={[value]}
            data={ValueList}
            cascade={false}
          />
        }

        {
          show && <div className="PickerView-meng" onClick={() => setShow(false)}></div>
        }

        {!child && <Button type="primary" onClick={memorandumId ? updataMemo : addMemo}>提交</Button>}

      </div>
    </>
  )
}


export default MemoDetail 